<script setup>
import { ref } from 'vue'
// 引入ai store
import { useAIStore } from '@/stores/modules/ai.js'
import { useNewTalkServe, useSubmitQuestionServe, useQuarryHistoryServe } from '@/api/ai.js'

const aiStore = useAIStore()
// 输入框内文字
const input = ref('')
// 历史记录刷新事件
const emit = defineEmits(['refresh-talk-record'])
// loading 状态
const loading = ref(false)

// 发送消息
const post = async () => {
  // 处理空文本
  if (!input.value) {
    ElMessage.warning('请输入内容')
    return
  }

  // TODO:如果当前talkID为空
  if (!aiStore.talkID) {
    //先把输入框内容添入talkList中
    aiStore.talkList.push({
      time: new Date().toJSON(),
      content: input.value,
      status: 1,
    })
    //关闭banner
    aiStore.setAIChatBoxSwitch(false)

    //再获取新的talkID
    const res = await useNewTalkServe()
    if (res.code === 200) {
      //更新aiStore的talkID
      aiStore.setTalkID(res.data.talkID)
      //再送问题请求

      //用fetch发起请求
      const resp = await fetch(
        '/api/user/dialogBox/question', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify({
            talkID: aiStore.talkID,
            content: input.value
          })
        }
      )

      //再把输入框清空
      input.value = ''

      const reader = resp.body.getReader()
      const decoder = new TextDecoder()
      const text = ref('')

      // 先把空内容添入talkList中
      aiStore.talkList.push({
        time: new Date().toJSON(),
        content: text.value,
        status: 0,
      })

      // 处理流式返回
      while (true) {
        const { done, value } = await reader.read()
        if (done) {
          break
        }
        const fragment = decoder.decode(value)
        aiStore.talkList[aiStore.talkList.length - 1].content += fragment
      }
    }


    //更新历史对话记录
    emit('refresh-talk-record')
  }

  // TODO:如果当前talkID不空
  else {

    //先把输入框内容添入talkList中
    aiStore.talkList.push({
      time: new Date().toJSON(),
      content: input.value,
      status: 1,
    })

    //用fetch发起请求
    const resp = await fetch(
      '/api/user/dialogBox/question', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          talkID: aiStore.talkID,
          content: input.value
        })
      }
    )

    //再把输入框清空
    input.value = ''

    const reader = resp.body.getReader()
    const decoder = new TextDecoder()
    const text = ref('')

    // 先把空内容添入talkList中
    aiStore.talkList.push({
      time: new Date().toJSON(),
      content: text.value,
      status: 0,
    })

    // 处理流式返回
    while (true) {
      const { done, value } = await reader.read()
      if (done) {
        break
      }
      const fragment = decoder.decode(value)
      console.log(fragment)
      aiStore.talkList[aiStore.talkList.length - 1].content += fragment
    }
  }
}

const options = [
  {
    value: 'op1',
    label: 'DeepSeek'
  },
  {
    value: 'op2',
    label: '智启知心'
  }
]
const optionValue = ref('')
</script>

<template>
  <div class="chat-input">

    <div class="checkBox">
      <el-select
        v-model="optionValue"
        placeholder="模型选择"
        size="large"
        style="
        width: 120px;
        border-radius: 6px;
">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </div>

    <div class="c-container">
      <textarea placeholder="以智启迪思维，以心感悟真知~" class="input" v-model="input"></textarea>
      <a @click="post" :disabled="loading">
        <img src="@/assets/icon/talkPost.png" alt="" class="post" />
      </a>
    </div>
  </div>
</template>

<style scoped lang="scss">
.chat-input {
  width: 100%;
  height: 26%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 50px;
  .checkBox{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 120px;
    box-shadow: -2px 0px 4px  rgba(95, 159, 232, 0.5), 2px 0px 6px  rgba(121, 72, 234, 0.5), 0px 2px 6px  rgba(0, 186, 173, 0.5), 0px -2px 6px  rgba(42, 130, 228, 0.5);
    border-radius: 6px;
  }

  .c-container {
    width: 75%;
    height: 55%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10%;
    border-radius: 20px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 5px 15px rgba(201, 201, 201, 0.2);
    overflow: hidden;
    .input {
      width: 80%;
      height: 99%;
      border: none;
      resize: none;
      overflow: auto;
      font-size: 20px;
      letter-spacing: 1px;
      border-radius: 20px;
      padding-top: 30px;
      padding-left: 30px;
      &:focus {
        outline: none;
      }
    }
    .post {
      width: 80px;
      height: 80px;
    }
  }
}
</style>
